<template>
  <div>
    <el-drawer title="订单详情" v-model="visible" :size="1000" @close="hide">
      <template #header>
        <div class="flex items-center title">
          <div class="w-[5px] h-[5px] rounded-[50%] bg-[#3721FF] mr-[10px] circle"></div>
          <div class="tits">订单详情</div>
        </div>
      </template>
      <div class="w-full h-[1px] bg-[#EFEFEF] line"></div>
      <div class="pt-[30px]" @click="handleClick">
        <div class="flex justify-between statusbox">
          <div class="mr-[12px] iconbox">
            <Icon icon="ep:warning" color="#FF8820" :size="24" />
          </div>
          <div class="mr-auto relative top-[-2px] info">
            <div class="text-[#101010] text-[20px] status">
              {{ getOrderStatus(String(orderDetails?.status)) }}
            </div>
            <div class="text-[14px] text-[#999] time">
              下单时间：{{ formatDate(orderDetails?.createTime) }}
            </div>
          </div>
          <div class="flex items-baseline cursor-pointer relative more">
            <div class="text-[#3721FF] mr-[4px] text-[14px] underline" @click.stop="handleOrderLog">
              订单日志
            </div>
            <div class="relative top-[2px] icon">
              <Icon icon="ep:question-filled" color="#3721FF" :size="14" />
            </div>
            <OrderLog ref="orderLogRef" :orderNo="orderNo" />
          </div>
        </div>
        <div class="pt-[30px] pb-[18px]">订单信息 > ></div>
        <div class="flex px-[24px] py-[17px] items-center bg-[#F7F7FB] rounded-[10px] header">
          <div class="text-[#524E74] text-[14px] items" style="flex: 0 0 40%">商品信息</div>
          <div class="text-[#524E74] text-[14px] items" style="flex: 0 0 25%">sku</div>
          <div class="text-[#524E74] text-[14px] items" style="flex: 0 0 15%">单价</div>
          <div class="text-[#524E74] text-[14px] items" style="flex: 0 0 10%">数量</div>
          <div class="text-[#524E74] text-[14px] items" style="flex: 0 0 10%">总价</div>
        </div>
        <div class="flex pt-[20px] pb-[14px] px-[18px] justify-between base">
          <div class="left">
            由 <span class="text-[#3721FF]">{{ orderDetails?.address }}</span> 发货
          </div>
          <div class="text-[14px] text-[#999] right">订单编号：{{ orderDetails?.orderNo }}</div>
        </div>
        <div
          class="rounded-[10px] relative px-[18px] py-[20px] infobox"
          style="border: 1px solid #e4e4e4"
        >
          <div class="flex mb-[10px] goodinfo"  v-for="(item, index) in orderDetails?.detailList" :key="index">
            <div class="info" style="flex: 0 0 40%">
              <div class="flex">
                <img class="w-[64px] h-[64px] shrink-0 rounded-[8px]" :src="item.picture" />
                <div class="ml-[12px]">
                  <div class="text-[14px] two-line-text text-[#101010]">{{ item.productName }}</div>
                  <div class="text-[14px] mt-[7px] text-[#999]">{{ item.propertyValueName }}:{{ item.propertyNameForeign }}</div>
                </div>
              </div>
            </div>
            <div class="info" style="flex: 0 0 25%">
              <div class="text-[14px]text-[#101010]">{{ item.propertyValueSku }}</div>
            </div>
            <div class="info" style="flex: 0 0 15%">
              <div class="text-[14px]text-[#101010]">
                {{ orderDetails?.currencySymbol }}
                {{ item.discountedPrice }}
                <div
                  class="text-[12px] line-through decoration-[#999] text-[#999]"
                  v-if="item.originalPrice"
                >
                    原价：{{ orderDetails?.currencySymbol }} {{ item.originalPrice }}
                </div>
              </div>
            </div>
            <div class="info" style="flex: 0 0 10%">
              <div class="text-[14px]text-[#101010]">x{{ item.number }}</div>
            </div>
            <div class="info" style="flex: 0 0 10%">
              <div class="text-[#FF6521] text-[14px] price">{{ item.totalPrice }}</div>
              <div class="text-[#999] text-[12px] unit">({{ orderDetails?.currencySymbol }})</div>
            </div>
          </div>
          <div class="w-full my-[20px] line2" style="border-bottom: 1px dashed #e4e4e4"></div>
          <div class="payInfo">
            <div class="text-[#101010] text-[14px] relative font-semibold pl-[10px] tit">
              付款信息
            </div>
            <div class="flex pt-[20px] w-full flex-wrap payInfoBox">
              <div class="flex items-center item">
                <div class="label">商品金额：</div>
                <div class="val"
                  >（{{ orderDetails?.currencySymbol }}）{{ orderDetails?.orderAmount || 0 }}</div
                >
              </div>
              <div class="flex items-center item">
                <div class="label">订单运费：</div>
                <div class="val"
                  >（{{ orderDetails?.currencySymbol }}）{{ orderDetails?.orderFreight || 0 }}</div
                >
              </div>
              <div class="flex items-center item">
                <div class="label">手续费：</div>
                <div class="val"
                  >（{{ orderDetails?.currencySymbol }}）{{ orderDetails?.serviceCharge || 0 }}</div
                >
              </div>
              <div class="flex items-center item">
                <div class="label">消费税：</div>
                <div class="val"
                  >（{{ orderDetails?.currencySymbol }}）{{ orderDetails?.consumptionTax || 0 }}</div
                >
              </div>
              <div class="flex items-center item">
                <div class="label">折扣：</div>
                <div class="val"
                  >（{{ orderDetails?.currencySymbol }}）{{ orderDetails?.discount || 0 }}</div
                >
              </div>
            </div>
          </div>
        </div>

        <div
          class="px-[24px] py-[17px] mt-[24px] rounded-[10px] flex justify-between custombox"
          style="border: 1px solid #e4e4e4"
          @click="handleCustomerShow"
        >
          <div class="flex items-center left">
            <div class="text-[#101010] text-[14px] relative font-semibold pl-[10px] tit">
              客户信息
            </div>
            <div class="text-[#3721FF] ml-[10px] ip">IP：{{ orderDetails?.ipAddress }}</div>
          </div>
          <div class="cursor-pointer right" >
            <Icon
              icon="ep:arrow-up-bold"
              color="#101010"
              :size="14"
              :style="`transform: rotate(${customerShow ? 180 : 0}deg);transition: all 0.3s linear;`"
            />
          </div>
        </div>

        <div
          class="px-[24px] mt-[10px] flex flex-wrap overflow-hidden rounded-[10px] customInfo"
          :class="customerShow ? 'py-[17px] border-[1px] border-solid border-[#e4e4e4]' : 'h-0'"
          style="transition: all 0.3s linear"
        >
          <div class="flex items-center item">
            <div class="text-[#666] label">客户名：</div>
            <div class="text-[#666] val">{{ orderDetails?.customerName || '--' }}</div>
          </div>
          <div class="flex items-center item">
            <div class="text-[#666] label">WhatsApp：</div>
            <div class="text-[#666] val">{{ orderDetails?.whatsapp || '--' }}</div>
          </div>
          <div class="flex items-center item">
            <div class="text-[#666] label">门牌号/建筑物名称：</div>
            <div class="text-[#666] val">{{ orderDetails?.houseNumber || '--' }}</div>
          </div>
          <div class="flex items-center item">
            <div class="text-[#666] label">联系电话：</div>
            <div class="text-[#666] val">{{ orderDetails?.customerPhone || '--' }}</div>
          </div>
          <div class="flex items-center item">
            <div class="text-[#666] label">line：</div>
            <div class="text-[#666] val">{{ orderDetails?.line || '--' }}</div>
          </div>
          <div class="flex items-center item">
            <div class="text-[#666] label"></div>
            <div class="text-[#666] val"></div>
          </div>
          <div class="flex items-center item">
            <div class="text-[#666] label">地址：</div>
            <div class="text-[#666] val">{{ orderDetails?.address || '--' }}</div>
          </div>
          <div class="flex items-center item">
            <div class="text-[#666] label">邮箱：</div>
            <div class="text-[#666] val">{{ orderDetails?.email || '--' }}</div>
          </div>
          <div class="flex items-center item">
            <div class="text-[#666] label">邮编：</div>
            <div class="text-[#666] val">{{ orderDetails?.email || '--' }}</div>
          </div>
          <div class="flex items-center item">
            <div class="text-[#666] label">详细地址：</div>
            <div class="text-[#666] val">
              {{ orderDetails?.detailAddress || '--' }}
            </div>
          </div>
          <div class="flex items-center item">
            <div class="text-[#666] label">物流方式：</div>
            <div class="text-[#666] val">{{ orderDetails?.logisticsMethod || '--' }}</div>
          </div>
          <div class="flex items-center item">
            <div class="text-[#666] label">内部备注：</div>
            <div class="text-[#666] val">{{ orderDetails?.remark || '--' }}</div>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import OrderLog from './OrderLog.vue'
import { formatDate } from '@/utils/formatTime'
import * as TradeOrderApi from '@/api/mall/trade/order'
import { DICT_TYPE, getIntDictOptions, getStrDictOptions } from '@/utils/dict'

const orderStatusList = getIntDictOptions(DICT_TYPE.ORDER_STATUS)

const props = defineProps({
  orderNo: {
    type: [String, Number],
    required: true,
    default: ''
  }
})

const visible = ref(false)

const orderDetails = ref<TradeOrderApi.ProductOrderGetRespVO>({})

const customerShow = ref(true)

const orderLogRef = ref<InstanceType<typeof OrderLog> | null>(null)

const showOrderLog = ref(false)

// 点击处理函数
const handleClick = () => {
  showOrderLog.value = false
  if (orderLogRef.value) {
    orderLogRef.value.hide()
  }
}

/**
 * 获取订单状态
 */
const getOrderStatus = (status: number | string) => {
  return orderStatusList.find((item) => item.value === Number(status))?.label
}

/**
 * 详情中是否显示订单日志
 */
const handleOrderLog = () => {
  showOrderLog.value = !showOrderLog.value
  if (showOrderLog.value) {
    orderLogRef.value?.show()
  } else {
    orderLogRef.value?.hide()
  }
}

/**
 * 详情中是否显示客户信息
 */
const handleCustomerShow = () => {
  customerShow.value = !customerShow.value
}

// 监听 orderNo 的变化
watch(
  () => props.orderNo,
  async (newOrderNo) => {
    if (newOrderNo && visible.value) {
      try {
        // 通过接口获取订单详情
        const response = await TradeOrderApi.getOrderDetails(props.orderNo)
        orderDetails.value = response
      } catch (error) {
        console.error('获取订单详情失败:', error)
      }
    }
  },
  { immediate: true, deep: true }
)

const show = () => {
  visible.value = true
}

const hide = () => {
  visible.value = false
  if (orderLogRef.value) {
    orderLogRef.value.hide()
  }
}

defineExpose({
  show,
  hide
})
</script>

<style lang="scss" scoped>
:deep(.el-drawer__header) {
  margin-bottom: 0px;
}
.infobox {
  &::before {
    content: '';
    width: 10px;
    height: 10px;
    position: absolute;
    top: -6px;
    left: 35px;
    background: #fff;
    display: block;
    z-index: 1;
    border-left: 1px solid #e4e4e4;
    border-top: 1px solid #e4e4e4;
    transform: rotate(45deg);
  }
}
.tit {
  &::before {
    content: '';
    width: 2px;
    height: 7px;
    position: absolute;
    top: 8px;
    left: 0px;
    background: #3721ff;
    border-radius: 0 2px 2px 0;
    display: block;
    z-index: 1;
  }
}
.payInfoBox {
  gap: 7px;
  .item {
    width: 32%;
    align-items: start;
    .label {
      flex-shrink: 0;
    }
  }
}
.customInfo {
  gap: 7px;
  .item {
    width: 32%;
    align-items: start;
    .label {
      flex-shrink: 0;
    }
  }
}
</style>
